<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>新日暮里温泉馆</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="/css/layui.css" media="all">
<link rel="stylesheet" href="/css/serch.css" media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
<style>
/*html, body, #container {
            height: 100%;
            width: 100%;
        }*/
.content-window-card {
	position: relative;
	box-shadow: none;
	bottom: 0;
	left: 0;
	width: auto;
	padding: 0;
}

.content-window-card p {
	height: 2rem;
}

.custom-info {
	border: solid 1px silver;
}

div.info-top {
	position: relative;
	background: none repeat scroll 0 0 #F9F9F9;
	border-bottom: 1px solid #CCC;
	border-radius: 5px 5px 0 0;
}

div.info-top div {
	display: inline-block;
	color: #333333;
	font-size: 14px;
	font-weight: bold;
	line-height: 31px;
	padding: 0 10px;
}

div.info-top img {
	position: absolute;
	top: 10px;
	right: 10px;
	transition-duration: 0.25s;
}

div.info-top img:hover {
	box-shadow: 0px 0px 5px #000;
}

div.info-middle {
	font-size: 12px;
	padding: 10px 6px;
	line-height: 20px;
}

div.info-bottom {
	height: 0px;
	width: 100%;
	clear: both;
	text-align: center;
}

div.info-bottom img {
	position: relative;
	z-index: 104;
}

span {
	margin-left: 5px;
	font-size: 11px;
}

.info-middle img {
	float: left;
	margin-right: 6px;
}
</style>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript"
	src="https://webapi.amap.com/maps?v=1.4.8&key=a1661afb10b214933c08f95f60668d52"></script>
<script src="/layui.js" charset="utf-8"></script>

<style>
.test {
	height: 100px;
	font-size: 70px;
	color: black;
	font-family: "biaoti";
	text-align: center;
}

.part2 {
	color: #3F3F3F;
	font-family: "zhengwen";
	width: 90%;
	margin: 0px auto;
}

.part {
	color: #3F3F3F;
	font-family: "zhengwen";
	width: 90%;
	height: 460px;
	margin: 10px auto;
	padding-left: 80px;
	font-size: 20px;
	line-height: 30px;
}

.part1 {
	color: #3F3F3F;
	font-family: "zhengwen";
	width: 600px;
	height: 450px;
	line-height: 50px;
	float: left;
}

.area {
	height: 200px;
	width: 650px;
	border: solid 1px #E5E5E5;
	font-size: 20px;
	background: #FFFFFF;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
	-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
	line-height: 25px;
}
</style>
<script type="text/javascript">
	$(function(){
	      $.ajax({
	         type:"get",
	         url:"header.html",
	         async:true,
	         success:function(data){
	            $("#header").html(data);
	         }
	      });
	   });
</script>
</head>
<body>
	<input type="hidden" id="opinions" th:value="${opinions}" />
	<ul class="layui-nav"
		style="background-color: IndianRed4; position: fixed; width: 100%; z-index: 1200;">
		<li class="layui-nav-item"><a href="/index.html">主页</a></li>
		<li class="layui-nav-item"><a href="/index.html#yuyue">预约</a></li>
		<li class="layui-nav-item"><a href="/index.html#jianjie">简介</a></li>
		<li class="layui-nav-item"><a href="/index.html#wenquan">温泉</a></li>
		<li class="layui-nav-item"><a href="/index.html#meishi">美食</a></li>
		<li class="layui-nav-item"><a href="/index.html#jiaotong">交通</a>
		</li>
		<li class="layui-nav-item"><a href="/order/allOpinion">查看评价</a></li>
		<li class="layui-nav-item" lay-unselect="" style="float: right;">
			<a href="javascript:;"><img src="/img/ic_sanso.svg"
				class="layui-nav-img">我的账号</a>
			<dl class="layui-nav-child">
				<shiro:hasRole name="group">
					<dd>
						<a href="/mycart.html">购物车</a>
					</dd>
				</shiro:hasRole>
				<dd>
					<a href="/memberinfo.html">个人主页</a>
				</dd>
				<dd>
					<a href="/order/all">历史订单</a>
				</dd>
				<dd>
					<a href="/logout">注销</a>
				</dd>
			</dl>
		</li>
	</ul>
	<br />
	<br />
	<br />
	<br />
	<fieldset class="layui-elem-field layui-field-title">
		<legend>
			<img src="/img/ic_honkan.svg" width="30px">&nbsp;&nbsp;入住体验
		</legend>
	</fieldset>
	<br />
	<div class="layui-tab layui-tab-card">
		<ul class="layui-tab-title">
			<li class="layui-this">查看全部</li>
			<li>好评</li>
			<li>中评</li>
			<li>差评</li>
		</ul>
		<div class="layui-tab-content" style="height: 100px;">
			<div class="layui-tab-item layui-show">
				<div
					style="padding: 20px; background-color: #F2F2F2; width: 100%; height: 100%;">
					<div class="layui-row layui-col-space15">
						<div class="layui-col-md6" id="show"></div>
					</div>
				</div>
			</div>
			<div class="layui-tab-item">
				<div
					style="padding: 20px; background-color: #F2F2F2; width: 100%; height: 100%;">
					<div class="layui-row layui-col-space15">
						<div class="layui-col-md6" id="show2"></div>
					</div>
				</div>
			</div>
			<div class="layui-tab-item">
				<div
					style="padding: 20px; background-color: #F2F2F2; width: 100%; height: 100%;">
					<div class="layui-row layui-col-space15">
						<div class="layui-col-md6" id="show3"></div>
					</div>
				</div>
			</div>
			<div class="layui-tab-item">
				<div
					style="padding: 20px; background-color: #F2F2F2; width: 100%; height: 100%;">
					<div class="layui-row layui-col-space15">
						<div class="layui-col-md6" id="show4"></div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script src="/layui.js" charset="utf-8"></script>
	<script th:inline="javascript">

	layui.use(['element', 'layer'], function(){
	  var element = layui.element;
	  var layer = layui.layer;
	  
	  //监听折叠
	  element.on('collapse(test)', function(data){
	    layer.msg('展开状态：'+ data.show);
	  });
	});
	
layui.use('element', function(){
  var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
  
  //监听导航点击
  element.on('nav(demo)', function(elem){
    //console.log(elem)
    layer.msg(elem.text());
  });
});

layui.use(['carousel', 'form'], function(){
  var carousel = layui.carousel
  ,form = layui.form;
  
  //事件
  carousel.on('change(test4)', function(res){
    console.log(res)
  });
  
  var $ = layui.$, active = {
    set: function(othis){
      var THIS = 'layui-bg-normal'
      ,key = othis.data('key')
      ,options = {};
      
      othis.css('background-color', '#5FB878').siblings().removeAttr('style'); 
      options[key] = othis.data('value');
      ins3.reload(options);
    }
  };
  
  //监听开关
  form.on('switch(autoplay)', function(){
    ins3.reload({
      autoplay: this.checked
    });
  });
  
  $('.demoSet').on('keyup', function(){
    var value = this.value
    ,options = {};
    if(!/^\d+$/.test(value)) return;
    
    options[this.name] = value;
    ins3.reload(options);
  });
  
  //其它示例
  $('.demoTest .layui-btn').on('click', function(){
    var othis = $(this), type = othis.data('type');
    active[type] ? active[type].call(this, othis) : '';
  });
});

var opinions1; 
var opinions2;
var opinions3;
var opinions4;
$(function() {
	opinions1 = [[${opinions1}]];
	opinions2 = [[${opinions2}]];
	opinions3 = [[${opinions3}]];
	opinions4 = [[${opinions4}]];
	var content='';
	var content2='';
	var content3='';
	var content4='';
	for(var i=0;i<opinions1.length;i++){
		content+='<div class="layui-card" style="margin: 30px 60px;">'
	    +'<div class="layui-card-header">'+opinions1[i].rtname+'</div>'
  		+'<div id="star'+i+'" style="height: 50px;margin-left: 15px;"></div>'
    	+'<div class="layui-card-body">'+opinions1[i].opinion+'</div></div>';
	}
	for(var i=0;i<opinions2.length;i++){
		content2+='<div class="layui-card" style="margin: 30px 60px;">'
	    +'<div class="layui-card-header">'+opinions2[i].rtname+'</div>'
  		+'<div id="star2'+i+'" style="height: 50px;margin-left: 15px;"></div>'
    	+'<div class="layui-card-body">'+opinions2[i].opinion+'</div></div>';
	}
	for(var i=0;i<opinions3.length;i++){
		content3+='<div class="layui-card" style="margin: 30px 60px;">'
	    +'<div class="layui-card-header">'+opinions3[i].rtname+'</div>'
  		+'<div id="star3'+i+'" style="height: 50px;margin-left: 15px;"></div>'
    	+'<div class="layui-card-body">'+opinions3[i].opinion+'</div></div>';
	}
	for(var i=0;i<opinions4.length;i++){
		content4+='<div class="layui-card" style="margin: 30px 60px;">'
	    +'<div class="layui-card-header">'+opinions4[i].rtname+'</div>'
  		+'<div id="star4'+i+'" style="height: 50px;margin-left: 15px;"></div>'
    	+'<div class="layui-card-body">'+opinions4[i].opinion+'</div></div>';
	}
	$("#show").html(content);
	$("#show2").html(content2);
	$("#show3").html(content3);
	$("#show4").html(content4);
});
layui.use(['rate'], function(){
  var rate = layui.rate;
  
	for(var i=0;i<opinions1.length;i++){
		  rate.render({
			   elem: '#star'+i
			    ,value: opinions1[i].grade //初始值
			    ,half: true //开启半星
			    ,readonly:true
		 })
	}
	for(var i=0;i<opinions2.length;i++){
		  rate.render({
			   elem: '#star2'+i
			    ,value: opinions2[i].grade //初始值
			    ,half: true //开启半星
			    ,readonly:true
		 })
	}
	for(var i=0;i<opinions3.length;i++){
		  rate.render({
			   elem: '#star3'+i
			    ,value: opinions3[i].grade //初始值
			    ,half: true //开启半星
			    ,readonly:true
		 })
	}
	for(var i=0;i<opinions4.length;i++){
		  rate.render({
			   elem: '#star4'+i
			    ,value: opinions4[i].grade //初始值
			    ,half: true //开启半星
			    ,readonly:true
		 })
	}
});







</script>


</body>
</html>
